<template>
	<view class="lease-contract">

		<!-- 合同下载 -->
		<view class="contract-file-wrap">
			<!-- 文件Icon -->
			<u-icon name="/bundle/static/images/pdf.png" width="80" height="96" />
			<!-- 文件名 -->
			<view class="contract-name mt10">租赁合同.pdf</view>
			<!-- 文件大小 -->
			<!-- <view class="contract-size">3.21MB</view> -->
			<!-- 下载按钮 -->
			<view class="contract-download" @tap="onDownloadContract">下载</view>
		</view> 


		<!-- 上传合同 -->
		<template v-if="contractStatus == 1 || contractStatus == 4">
			<view class="container">
				<!-- 合同 -->
				<view>
					<view class="container-header">
						<text class="container-title">合同</text>
						<text class="container-tips">(最多可上传8张，支持jpg、png格式)</text>
					</view>
					<view>
					    <u-upload
					      ref="uUpload" 
					      width="162"
					      height="162"
					      :auto-upload="false"
					      :custom-btn="true"
					      :border-bottom="false"
					      :show-progress="false"
						  :file-list="uploadedPictures"
						  max-count="8"
					      @on-remove="handlePictureRemove"
					      @on-choose-complete="handlePictureUpload"
					    >
					        <view slot="addBtn" class="picture-button--upload">
					            <u-icon name="/static/images/icon_camera.png" width="54" />
					            <view class="xs normal">上传图片</view>
					        </view>
					    </u-upload>
					</view>
				</view>
				<!-- 身份证 -->
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">身份证</text>
						<text class="container-tips">(正、反面，支持jpg、png格式)</text>
					</view>
					<view>
					    <u-upload
					      ref="uUpload" 
					      width="162"
					      height="162"
					      :auto-upload="false"
					      :custom-btn="true"
					      :border-bottom="false"
					      :show-progress="false"
						  :file-list="uploadedPicturesID"
						  max-count="2"
					      @on-remove="handlePictureRemoveID"
					      @on-choose-complete="handlePictureUploadID"
					    >
					        <view slot="addBtn" class="picture-button--upload">
					            <u-icon name="/static/images/icon_camera.png" width="54" />
					            <view class="xs normal">上传图片</view>
					        </view>
					    </u-upload>
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">身份证号码</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="cardID" />
					</view>
				</view>
				
				<view class="button--uploader" @tap="onSubmit">{{ contractStatus == 1 ? '立即上传' : '重新上传'}}</view>
			</view>
		</template>



		<!-- 预览已上传合同 -->
		<template v-if="uploadedPictures.length && contractStatus != 4">
			<view class="container">
				<!-- 合同 -->
				<view>
					<view class="container-header">
						<text class="container-title">合同</text>
						<!-- <text class="container-tips">(最多可上传8张，支持jpg、png格式)</text> -->
					</view>
					<view class="uploaded-pictures">
						<block v-for="(item, index) in pictures" :key="index">
							<!-- #ifndef MP-ALIPAY -->
							<u-image
							  class="mr20 mb20" 
							  width="162" 
							  height="162" 
							  border-radius="3px"
							  @tap="showPicture(index)"
							  :src="item" 
							/>
							<!-- #endif -->
							<!-- #ifdef MP-ALIPAY -->
							<image :src="item" mode="aspectFill" @tap="showPicture(index)" style="width: 162rpx; height: 162rpx; border-radius: 3px;" />
							<!-- #endif -->
						</block>
					</view>
				</view>
				<!-- 身份证 -->
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">身份证</text>
						<!-- <text class="container-tips">(最多可上传2张，支持jpg、png格式)</text> -->
					</view>
					<view class="uploaded-pictures">
						<block v-for="(item, index) in picturesID" :key="index">
							<!-- #ifndef MP-ALIPAY -->
							<u-image
							  class="mr20 mb20" 
							  width="162" 
							  height="162" 
							  border-radius="3px"
							  @tap="showPictureID(index)"
							  :src="item" 
							/>
							<!-- #endif -->
							<!-- #ifdef MP-ALIPAY -->
							<image :src="item" mode="aspectFill" @tap="showPictureID(index)" style="width: 162rpx; height: 162rpx; border-radius: 3px;" />
							<!-- #endif -->
						</block>
					</view>
				</view>
				
				<!-- 身份证号码 -->
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">身份证号码</text>
					</view>
					<view>
						<u-input v-model="cardID" disabled />
					</view>
				</view>
			</view>
		</template>


		<!-- 审核状态 -->
		<template v-if="contractStatus != 1">
			<view class="container">
				<view class="container-header">
					<text class="container-title">审核结果</text>
				</view>
				<view class="audit-item">
					<view class="audit-label">审核状态</view>
					<view class="audit-content">
						<template v-if="contractStatus == 2">
							<text class="normal">审核中</text>
						</template>
						<template v-else-if="contractStatus == 3">
							<text class="primary">审核通过</text>
						</template>
						<template v-else-if="contractStatus == 4">
							<text class="ornament">审核失败</text>
						</template>
					</view>
				</view>
				<view class="audit-remark">
					<view class="audit-remark-label">商家备注</view>
					<view class="audit-remark-content">{{ remarks || '' }}</view>
				</view>
			</view>
		</template>


		<!-- 提示 -->
		<view class="tips" v-if="isShowTips">
			<u-icon class="mr20" name="error-circle-fill" color="#FF2C3C" size="40" />
			<text class="tips-content">请先下载合同填写完善信息后再拍照上传</text>
			<u-icon name="close" color="#F95F2F" @tap="isShowTips = false" />
		</view>

	</view>
</template>


<script>
	import { uploadFile } from '@/utils/tools'
	
	import {
		getLeaseContractDetail,
		leaseContractSubmit
	} from '@/api/lease'
	
	export default {
		data() {
			return {
				contractID: '',				// 合同ID
				contractStatus: '',			// 合同状态
				remarks: '',				// 审核备注
				pictures: [],				// 合同图片
				picturesID: [],				// 身份证图片
				cardID: '',					// 身份证号码
				
				contractDownloadURL: '',	// 合同下载地址
				
				uploadedPictures: [],		// 已上传图片
				uploadedPicturesID: [],		// 身份证已上传图片
				
				isShowTips: true,			// 是否显示悬浮提示语
			}
		},

		methods: {
			// 下载合同
			onDownloadContract() {
				// this.isDownloading = true;
				uni.navigateTo({
					url: `/bundle/pages/lease_contract_download/lease_contract_download?url=${this.contractDownloadURL}`
				})
			},
			
			// 查看图片
			showPicture(index) {
			    uni.previewImage({
			        current: index,
			        urls: this.pictures
			    });
			},
			
			showPictureID(index) {
			    uni.previewImage({
			        current: index,
			        urls: this.picturesID
			    });
			},
			
			// 图片上传
			handlePictureUpload(lists, index) {
			    uni.showLoading({
			      title: '正在上传中...',
			      mask: true
			    });
			    
			    const LEN = lists.length;
				
				const initLen = this.pictures.length
			    for (let i = initLen; i < LEN; ++i) {
			        const file = {...lists[i]};
					
			        uploadFile(file.url).then(res => {
						this.pictures.push(res.url);
			        }).catch(err => {
						this.$toast({ title: '上传失败' })
					}).finally(() => {
						uni.hideLoading();
					})
			    }
			},
			
			handlePictureUploadID(lists, index) {
			    uni.showLoading({
			      title: '正在上传中...',
			      mask: true
			    });
			    
			    const LEN = lists.length;
				
				const initLen = this.picturesID.length;
			    for (let i = initLen; i < LEN; ++i) {
			        const file = {...lists[i]};
					
			        uploadFile(file.url).then(res => {
						this.picturesID.push(res.url)
			        }).catch(err => {
						this.$toast({ title: '上传失败' })
					}).finally(() => {
						uni.hideLoading();
					})
			    }
			},
			
			// 图片删除
			handlePictureRemove(index, lists, name) {
				this.pictures.splice(index, 1)
			},
			
			// 图片删除
			handlePictureRemoveID(index, lists, name) {
				this.picturesID.splice(index, 1)
			},
			
			// 点击提交
			onSubmit() {
				if (!this.pictures.length) return this.$toast({ title: '合同不能没有内容' });
				if (!this.picturesID.length) return this.$toast({ title: '身份证照片不能没有内容' });
				if (!this.cardID) return this.$toast({ title: '身份证号码不能没有内容' });
				
				const pictures = this.pictures.join(',');
				const picturesID = this.picturesID.join(',');
				leaseContractSubmit({
					id: this.contractID,
					contract: pictures,
					id_image: picturesID,
					id_number: this.cardID,
				}).then(({ code }) => {
					if (code != 1) return;
					uni.showToast({ title: '上传成功', icon: 'success' });
					setTimeout(() => uni.navigateBack(), 500);
				});
			}
		},
		
		onLoad(options) {
			const id = options.id;
			
			getLeaseContractDetail({ id }).then(({code, data}) => {

				this.contractID = data.id;
				this.remarks = data.remarks;
				this.contractStatus = data.contract_status;
				this.contractDownloadURL = data.contract_down;
				this.cardID = data.id_number;
				
				if (data.contract_up) {
					const pictures = data?.contract_up?.split(',') || [];
					const picturesID = data?.id_image?.split(',') || [];
					this.pictures = pictures;
					this.picturesID = picturesID;
					pictures.forEach(item => this.uploadedPictures.push({url: item}));					
					picturesID.forEach(item => this.uploadedPicturesID.push({url: item}));					
				}
			});
		}
	}
</script>


<style scoped>
	.container {
		margin: 20rpx 0;
		padding: 20rpx 30rpx 30rpx 30rpx;
		background-color: #FFFFFF;
	}
	
	.container-header {
		padding-bottom: 20rpx;
	}
	
	.container-title {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	
	.container-tips {
		margin-left: 20rpx;
		font-size: 26rpx;
		color: #BBBBBB;
	}

	.contract-file-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 460rpx;
		background-color: #FFFFFF;
	}

	.contract-name {
		font-size: 26rpx;
		color: #333333;
	}

	.contract-size {
		margin-bottom: 20rpx;
		font-size: 22rpx;
		color: #999999;
	}

	.contract-download {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 420rpx;
		height: 82rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		border: 1px solid #D7D7D7;
		border-radius: 10px;
		color: #333333;
	}
	
	.button--uploader {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 88rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		border-radius: 5px;
		background-color: #24A3FF;
		color: #FFFFFF;
	}
	
	.picture-button--upload {
	    box-sizing: border-box;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    width: 162rpx;
	    height: 162rpx;
	    border: 2rpx dashed #CCCCCC;
	    border-radius: 5px;
	}
	
	.uploaded-pictures {
		display: flex;
		flex-wrap: wrap;
	}
	
	.audit-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 30rpx 0;
		border-bottom: 1px solid #D7D7D7;
	}
	
	.audit-label {
		font-size: 30rpx;
		color: #666666;
	}
	
	.audit-content {
		font-size: 30rpx;
		color: #333333;
	}
	
	.audit-remark-label {
		padding: 20rpx 0 10rpx 0;
	}
	
	.audit-remark-content {
		min-height: 120rpx;
		padding: 12rpx 20rpx;
		border: 1px solid #D7D7D7;
		border-radius: 5px;
	}
	
	.tips {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		height: 72rpx;
		padding: 0 20rpx;
		background-color: #FFFADE;
	}
	
	.tips-content {
		margin-right: auto;
		font-size: 26rpx;
		color: #F95F2F;
	}
</style>
